<template>
  <div>
    <div class="head-container">
      <!-- 搜索 -->
      <div>
        <el-select
          v-model="query.userType"
          filterable
          clearable
          size="small"
          placeholder="请选择校友身份"
          class="filter-item"
          @change="crud.toQuery"
        >
          <el-option v-for="item in dict.user_type" :key="item.id" :label="item.label" :value="item.value" />
        </el-select>
        <el-input
          v-model="query.name"
          clearable
          placeholder="输入姓名搜索"
          style="width: 185px;"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        />
        <el-select
          v-model="query.gender"
          clearable
          size="small"
          placeholder="性别"
          class="filter-item"
          style="width: 80px"
          @change="crud.toQuery"
        >
          <el-option v-for="item in dict.gender_type" :key="item.id" :label="item.label" :value="item.value" />
        </el-select>
        <el-select
          v-model="query.nationId"
          filterable
          clearable
          size="small"
          placeholder="民族"
          class="filter-item"
          style="width: 120px"
          @change="crud.toQuery"
        >
          <el-option v-for="item in dict.nation" :key="item.id" :label="item.label" :value="item.value" />
        </el-select>
        <el-select
          v-model="query.politicalId"
          filterable
          clearable
          size="small"
          placeholder="政治面貌"
          class="filter-item"
          style="width: 130px"
          @change="crud.toQuery"
        >
          <el-option v-for="item in dict.political_climate" :key="item.id" :label="item.label" :value="item.value" />
        </el-select>
        <rrOperation />
      </div>
    </div>
    <el-table
      ref="table"
      v-loading="crud.loading"
      :data="crud.data"
      size="small"
      style="width: 100%;"
    >
      <el-table-column prop="name" label="姓名" sortable />
      <el-table-column prop="gender" label="性别" width="80px" sortable>
        <template slot-scope="scope">
          {{ dict.label.gender_type[scope.row.gender] }}
        </template>
      </el-table-column>
      <el-table-column prop="birthDate" label="出生年月" sortable />
      <el-table-column prop="nationId" label="民族">
        <template slot-scope="scope">
          {{ dict.label.nation[scope.row.nationId] }}
        </template>
      </el-table-column>
      <el-table-column prop="politicalId" label="政治面貌">
        <template slot-scope="scope">
          {{ dict.label.political_climate[scope.row.politicalId] }}
        </template>
      </el-table-column>
      <el-table-column prop="phone" label="联系电话" />
      <el-table-column prop="joined" label="是否加入" width="80px">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.joined" active-color="#409EFF" inactive-color="#F56C6C" @change="changeEnabled(scope.row, scope.row.joined)" />
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <pagination />
  </div>
</template>

<script>
import crudSelectUser from '@/api/anniversary/selectUser'
import {
  add as addUserInfo
} from '@/api/anniversary/associationUserInfo'
import CRUD, {
  presenter,
  header,
  form
} from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import pagination from '@crud/Pagination'

const defaultForm = {
  userId: null,
  associationId: null,
  userType: null,
  name: null,
  gender: null,
  birthDate: null,
  nationId: null,
  politicalId: null,
  phone: null
}
export default {
  components: {
    rrOperation,
    pagination
  },
  mixins: [presenter(), header(), form(function() {
    return Object.assign({
      associationUserInfo: {
        id: this.associationId
      }
    }, defaultForm)
  })],
  props: {
    associationId: {
      type: Number,
      required: true
    }
  },
  cruds() {
    return CRUD({
      title: '参加校友会人员',
      url: 'api/selectUser',
      query: {
        associationId: ''
      },
      sort: 'name',
      crudMethod: { ...crudSelectUser
      },
      queryOnPresenterCreated: false
    })
  },
  dicts: ['gender_type', 'user_type', 'data_status', 'political_climate', 'nation'],
  data() {
    return {
      rules: {},
      permission: {
        add: ['admin', 'associationUserInfo:add'],
        edit: ['admin', 'associationUserInfo:edit'],
        del: ['admin', 'associationUserInfo:del']
      },
      person: {
        name: null,
        associationId: null,
        userId: null,
        type: null,
        isEnable: true
      }
    }
  },
  methods: {
    // 新增与编辑前做的操作
    // [CRUD.HOOK.beforeSubmit]() {
    // },
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      // 预设不需要输入的值
      this.query.associationId = this.associationId
      return true
    },
    // 改变状态
    changeEnabled(data, val) {
      this.$confirm('此操作将 "' + this.dict.label.data_status[val] + '" ' + data.name + ', 是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.person.name = data.name
        this.person.associationId = this.associationId
        this.person.userId = data.userId
        this.person.type = data.userType
        this.person.isEnable = true

        addUserInfo(this.person).then(res => { // crudNews.edit(data)
          this.crud.notify(this.dict.label.data_status[val] + '成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
          this.crud.refresh()
        }).catch(() => {
          data.isEnable = !data.isEnable
          this.crud.refresh()
        })
      }).catch(() => {
        data.isEnable = !data.isEnable
        this.crud.refresh()
      })
    }
  }
}
</script>

<style scoped>

</style>

<style>
	.el-row {
		margin-bottom: 10px;
		display: flex;
		flex-wrap: wrap
	}
</style>
